---
description: Компонент, представляющий собой отдельное состояние интерфейса, отображающееся в один момент времени.
---

<Overview group="navigation">
# Panel [tag:component]

Компонент, представляющий собой отдельное состояние интерфейса, отображающееся в один момент времени.

Связанные страницы:

- [View](/components/view)
- [Навигация](/overview/navigation)

</Overview>

import { FixedLayoutWrapper } from '@/components/wrappers';

<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel>
  <PanelHeader>Заголовок экрана</PanelHeader>
  <Placeholder stretched>Контент экрана</Placeholder>
</Panel>
```

</Playground>

## Визуальное оформление

### Тип отображения

Задаётся свойством `mode`.

- `"card"` — карточный дизайн с тенями и скруглениями;
- `"plain"` — плоский дизайн без теней и скруглений.

По умолчанию переключение между типами отображения зависит от [`sizeY`](/overview/adaptivity#sizex)

| `sizeX`     | `mode`    |
| ----------- | --------- |
| `"regular"` | `"card"`  |
| `"compact"` | `"plain"` |

### Центрирование контента

Задаётся свойством `centered`.

<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel centered>
  <PanelHeader>Заголовок экрана</PanelHeader>
  <div>Отцентрованный контент</div>
</Panel>
```

</Playground>

### Фон страницы

Задаётся свойством `disableBackground`.

- `true` — задаёт прозрачный цвет фона;
- `false` — стандартный цвет фона.

<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel disableBackground>
  <PanelHeader>Заголовок экрана</PanelHeader>
  <Placeholder stretched>За мной нет фона</Placeholder>
</Panel>
```

</Playground>

## PanelSpinner [tag:component]

Индикатора загрузки внутри экрана. Автоматически добавляет стандартные отступы и центрирование.

<Playground Wrapper={FixedLayoutWrapper} style={{ height: 415, overflow: 'hidden' }}>

```jsx
<Panel centered>
  <PanelHeader>PanelSpinner</PanelHeader>
  <PanelSpinner />
</Panel>
```

</Playground>

### Свойства

Наследует все свойства компонента [`Spinner`](/components/spinner).

- `size` — размер индикатора.
- `disableAnimation` — отключение анимации.
- `noColor` — наследование цвета.

#### Высота компонента

Задается с помощью свойства `height`:

```jsx
<PanelSpinner height={300} />
```

### Когда использовать

- При загрузке контента внутри экрана.
- Когда нужен центрированный спиннер с отступами.
- Для полностраничной загрузки (в сочетании с кастомной высотой).

### Альтернативы

- [`Spinner`](/components/spinner) — для встроенной загрузки внутри элементов.
- [`ScreenSpinner`](/components/screen-spinner) — для модальной загрузки поверх интерфейса.

### Доступность (a11y) [#a11y]

Следует придерживаться тех же правил, что и для компонента [`Spinner`](/components/spinner).

## Свойства и методы [#api]

<PropsTable name={["Panel", "PanelSpinner"]}>
### Panel [#panel-api]

### PanelSpinner [#panel-spinner-api]

</PropsTable>
